﻿@model CustomerDownloadableProductsModel
@inject IPageHeadBuilder pagebuilder
@{
    Layout = "_TwoColumns";

    //title
    pagebuilder.AddTitleParts(Loc["Title.Account"]);
}

@section left
{
    @await Component.InvokeAsync("CustomerNavigation", new { selectedTabId = AccountNavigationEnum.DownloadableProducts })
}

<section class="page account-page downloadable-products-page pl-lg-3 pt-lg-0 pt-3">
    <h1 class="h2 generalTitle">
        <div>@Loc["Account.DownloadableProducts"]</div>
    </h1>
    <a class="left-side-toggler mb-3" onclick="sideToggle()">
        <div class="inner">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="text">
            @Loc["Account.Navigation"]
        </div>
    </a>
    @if (Model.Items.Any())
    {
        <div id="downloadable-products"></div>
        <script>
                                var DownloadableProducts = Vue.extend({
                                    template: '<b-table :fields="fields" :items="items" responsive><template v-slot:cell(order)="data"><div v-html="data.value.order"></div></template><template v-slot:cell(date)="data"><div v-html="data.value.date"></div></template><template v-slot:cell(product)="data"><div v-html="data.value.product"></div></template><template v-slot:cell(download)="data"><div v-html="data.value.download"></div></template></b-table>',
                                    data: function () {
                                        return {
                                            fields: [
                                                { key: 'order', label: '@Loc["DownloadableProducts.Fields.Order"]'},
                                                { key: 'date', label: '@Loc["DownloadableProducts.Fields.Date"]'},
                                                { key: 'product', label: '@Loc["DownloadableProducts.Fields.Product"]'},
                                                { key: 'download', label: '@Loc["DownloadableProducts.Fields.Download"]'},
                                            ],
                                            items: [
                                                @for (var i = 0; i < Model.Items.Count; i++)
                                                {
                                                    var item = Model.Items[i];
                                                    <text>
                                                {
                                                    order: {
                                                        order: '<a href="@Url.RouteUrl("OrderDetails", new { orderId = item.OrderId })">@item.OrderNumber</a>'
                                                    },
                                                    date: {
                                                        date: '@item.CreatedOn.ToString("d")'
                                                    },
                                                    product: {
                                                        product: '<a href="@Url.RouteUrl("Product", new { SeName = item.ProductSeName })">@item.ProductName</a>@if (!string.IsNullOrEmpty(item.ProductAttributes))
                                                                                                                                                               {
                                                                                                                                                                   <div class="attributes">@Html.Raw(item.ProductAttributes)</div>
                                                                                                                                                               }'
                                                    },
                                                    download: {
                                                        download: '@if (!string.IsNullOrEmpty(item.DownloadId))
                                                                   {
                                                                       <a href="@Url.RouteUrl("GetDownload", new { orderItemId = item.OrderItemGuid })">@Loc["DownloadableProducts.Fields.Download"]</a>
                                                                   }
                                                                   else
                                                                   {
                                                                       @Loc["DownloadableProducts.Fields.Download.NA"]
                                                                   }
                                                        @if (!string.IsNullOrEmpty(item.LicenseId)) @if (!string.IsNullOrEmpty(item.LicenseId))
                                                        {
                                                            <a href="@Url.RouteUrl("GetLicense", new { orderItemId = item.OrderItemGuid })">@Loc["DownloadableProducts.Fields.DownloadLicense"]</a>
                                                        }'
                                                    },

                                                },
                                                    </text>
                                                }
                                            ]
                                        }
                                    }
                                })
                            new DownloadableProducts().$mount('#downloadable-products')
        </script>
    }
    else
    {
        <div class="no-data alert alert-info">
            @Loc["DownloadableProducts.NoItems"]
        </div>
    }
</section>